<template>
  <div class="app-container" v-loading="loading">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="项目ID" prop="id">
        <el-select clearable="" v-model="queryParams.projectId" filterable placeholder="请选择项目">
          <el-option v-for="item in projectList" :key="item.id" :label="item.projectName" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryByForm">检索</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-button size="small" type="primary" icon="el-icon-plus" @click="handleAdd"
        style="margin-right: 20px">新增算法调用次数</el-button>
      <!-- <el-button size="small" type="primary" icon="el-icon-plus" @click="handleBatchInsert"
        style="margin-right: 20px">项目批量新增商品</el-button> -->
      <ExportExcel :list="exportList" :tHeader="tHeader" :tValue="tValue" filename="导出的算法次数列表">excel导出</ExportExcel>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-row>

    </el-row>
    <el-table ref="CountTable" :data="list" style="width: 100%"  empty-text="--" @selection-change="handleSelectionChange"  :default-sort = "{prop: 'id', order: 'descending'}"
      row-key="id">
      <el-table-column type="selection" width="55" :reserve-selection="true">
      </el-table-column>
      <el-table-column sortable label="序号" align="center" prop="id" />
      <el-table-column label="项目" align="center" prop="projectName" :show-overflow-tooltip="true" />
      <el-table-column label="陈列v4算法调用次数" align="center" prop="algoV4Count" :show-overflow-tooltip="true" />
      <el-table-column label="亮度算法调用次数" align="center" prop="brightnessCount" :show-overflow-tooltip="true" />
      <el-table-column label="遮挡识别剩余次数" align="center" prop="coverCount" :show-overflow-tooltip="true" />
      <el-table-column label="油污算法调用次数" align="center" prop="muddyCount" :show-overflow-tooltip="true" />
      <el-table-column label="风幕次数" align="center" prop="segCount" :show-overflow-tooltip="true" />
      <el-table-column label="陈列v5算法调用次数" align="center" prop="displayV5Count" :show-overflow-tooltip="true" />
      <el-table-column label="陈列v4算法调用次数阈值" align="center" prop="algoV4CountThreshold" :show-overflow-tooltip="true" />
      <el-table-column label="亮度算法调用次数阈值" align="center" prop="brightnessCountThreshold" :show-overflow-tooltip="true" />
      <el-table-column label="遮挡识别剩余次数阈值" align="center" prop="coverCountThreshold" :show-overflow-tooltip="true" />
      <el-table-column label="油污算法调用次数阈值" align="center" prop="muddyCountThreshold" :show-overflow-tooltip="true" />
      <el-table-column label="风幕阈值" align="center" prop="segCountThreshold" :show-overflow-tooltip="true" />
      <el-table-column label="陈列v5算法阈值" align="center" prop="displayV5CountThreshold" :show-overflow-tooltip="true" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleEdit(scope.row)">修改阈值</el-button>
          <el-button size="mini" type="text" @click="handleDel(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="pagination" />



    <!-- 以下为弹框相关 修改&新增-->
    <el-dialog :title="dialogTitle" :visible.sync="dialogOpen" @close="cancel" width="900px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="170px">
        <el-row>
          <el-col >
            <div style="color: red;margin: 20px;">注：次数为-1时表示不限制次数</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="项目" prop="projectId">
              <el-select v-model="form.projectId" filterable placeholder="请选择" style="width:545px">
                <el-option v-for="item in projectList" :key="item.id" :label="item.projectName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row> 
        <el-row>
          <el-col :span="10">
            <el-form-item label="陈列v4算法调用次数" prop="algoV4Count" >
              <el-input type="number" v-model.number="form.algoV4Count" placeholder="请输入" :disabled="this.dialogTitle == '修改算法次数' ? true : false" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="亮度算法调用次数" prop="brightnessCount">
              <el-input type="number" v-model.number="form.brightnessCount" placeholder="请输入" :disabled="this.dialogTitle == '修改算法次数' ? true : false"/>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="遮挡识别调用次数" prop="coverCount">
              <el-input type="number" v-model.number="form.coverCount" placeholder="请输入" :disabled="this.dialogTitle == '修改算法次数' ? true : false"/>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="油污算法调用次数" prop="muddyCount">
              <el-input type="number" v-model.number="form.muddyCount" placeholder="请输入" :disabled="this.dialogTitle == '修改算法次数' ? true : false"/>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="风幕算法调用次数" prop="segCount">
              <el-input type="number" v-model.number="form.segCount" placeholder="请输入" :disabled="this.dialogTitle == '修改算法次数' ? true : false"/>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="陈列v5算法调用次数" prop="displayV5Count">
              <el-input type="number" v-model.number="form.displayV5Count" placeholder="请输入" :disabled="this.dialogTitle == '修改算法次数' ? true : false"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="10">
            <el-form-item label="陈列v4算法调用次数阈值" prop="algoV4CountThreshold" >
              <el-input type="number" v-model.number="form.algoV4CountThreshold" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="亮度算法调用次数阈值" prop="brightnessCountThreshold">
              <el-input type="number" v-model.number="form.brightnessCountThreshold" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="遮挡识别次数阈值" prop="coverCountThreshold">
              <el-input type="number" v-model.number="form.coverCountThreshold" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="油污算法调用次数阈值" prop="muddyCountThreshold">
              <el-input type="number" v-model.number="form.muddyCountThreshold" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="风幕算法调用次数阈值" prop="segCountThreshold">
              <el-input type="number" v-model.number="form.segCountThreshold" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="陈列v5算法调用次数阈值" prop="displayV5CountThreshold">
              <el-input type="number" v-model.number="form.displayV5CountThreshold" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>

          

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 删除前提示 -->
    <el-dialog title="提示" :visible.sync="deleteVisible" width="30%">
      <span>是否删除？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteSKU">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
    
<script>
import { getCountList, addCount, modifyCount, delCount, getCountInfo } from '@/api/arithmetic/arithmeticCount'
import { getProjectList } from '@/api/projectSku/projectSku'
import ExportExcel from '../../../components/ExcelUtils/Export2Excel.vue'
export default {
  name: 'Online',
  components: {
    ExportExcel
  },
  data() {
    return {
      queryParams: {  //检索数据
        projectId: '',
        isAsc:'desc'
      },
      showSearch: true,
      list: [],
      dialogOpen: false,
      dialogTitle: '新增算法调用次数',
      rules: {
        projectId: [
          { required: true, message: '不能为空', trigger: 'blur' },
        ],
        algoV4Count: [{ message: '最小值为0', trigger: 'blur', type: 'number', min: -1 }],
        brightnessCount: [{ message: '最小值为0', trigger: 'blur', type: 'number', min: -1 }],
        coverCount: [{ message: '最小值为0', trigger: 'blur', type: 'number', min: -1 }],
        muddyCount: [{ message: '最小值为0', trigger: 'blur', type: 'number', min: -1 }],
        segCount: [{ message: '最小值为0', trigger: 'blur', type: 'number', min: -1 }],
        displayV5Count: [{ message: '最小值为0', trigger: 'blur', type: 'number', min: -1 }],
      },
      projectList: {}, //获取到的项目列表
      form: {  //新增或修改时的表单
        algoV4Count: 0,
        brightnessCount: 0,
        coverCount: 0,
        muddyCount: 0,
        segCount: 0,
        displayV5Count:0,
        projectId: 0,
        id: '',
      },
      editRow: null, //修改行
      deleteVisible: false, // 删除提示
      loading: false,//等待
      isEdit: false,
      exportList: [],
      tHeader: ['项目', '	陈列v4算法调用次数', '	亮度算法调用次数', '	遮挡识别剩余次数', '	油污算法调用次数', '	风幕算法调用次数','陈列v5算法调用次数'],
      tValue: ['projectName', 'algoV4Count', 'brightnessCount', 'coverCount', 'muddyCount', 'segCount','displayV5Count'],
      total: 0,
      pageNum: 1,
      pageSize: 10,
    }
  },
  created() {
    this.getProject()
    this.getList()
  },
  mounted() {

  },
  watch: {
    chooseValue() {
      const text = this.infoText()
      this.showText = text
    },
  },
  methods: {
    /**获取列表 */
    getList() {
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        projectId: this.queryParams.projectId,
        isAsc:'desc'
      }
      if (this.$route.query.projectId) {
        params.projectId = this.$route.query.projectId
      }
      getCountList(params).then((res) => {
        if (res.code === 200) {
          this.list = res.rows
          this.total = res.total
        }
      }).catch((err) => {
        this.$message.success("结果查询失败，原因：", err.message)
      }).finally(() => {
        this.$router.push({ query: {} })
      })
    },
    /**获取项目列表 */
    getProject() {
      let params = {
      }
      getProjectList(params).then((res) => {
        if (res.code === 200) {
          this.projectList = res.rows
          // for (var i = 0; i < res.rows.length; i++) {
          //     this.projectName.push(res.rows[i].projectName)
          // }
        }
      })
    },
    /**条件查询*/
    queryByForm() {
      const params = {
        ...this.queryParams,
        //pageIndex: 0,
      }
      this.getList(params)
    },

    /** 点击新增sku */
    handleAdd() {
      this.dialogTitle = '新增算法次数'
      this.dialogOpen = true
      this.form = {}
      this.isEdit = false
    },
    handleEdit(row) {
      this.form = {}
      const id = row.id
      getCountInfo(id).then((res) => {
        if (res.code === 200) {
          this.form = res.data
          this.form.projectId = parseInt(res.data.projectId)
          this.dialogTitle = '修改算法次数'
          this.dialogOpen = true
        }else{
          this.$message.warning("获取详情失败,原因:"+res.msg)
        }
      }).catch((err) =>{
        this.$message.error("调用次数获取失败,原因:"+err.msg)
      })
      this.isEdit = true
    },

    submitForm() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return
        }
        const params = {
          algoV4Count: this.form.algoV4Count,
          brightnessCount: this.form.brightnessCount,
          coverCount: this.form.coverCount,
          muddyCount: this.form.muddyCount,
          segCount: this.form.segCount,
          displayV5Count: this.form.displayV5Count,
          projectId: this.form.projectId,
          id: this.form.id,
          segCountThreshold: this.form.segCountThreshold,
          muddyCountThreshold: this.form.muddyCountThreshold,
          coverCountThreshold: this.form.coverCountThreshold,
          brightnessCountThreshold: this.form.brightnessCountThreshold,
          algoV4CountThreshold: this.form.algoV4CountThreshold,
          displayV5CountThreshold:this.form.displayV5CountThreshold,
        }
        if (!this.isEdit) {
          //新增
          this.loading = true
          addCount(params).then((res) => {
            if (res.code === 200) {
              this.$message.success("添加成功！")
            }
          }).finally(() => {
            this.loading = false
            this.cancel()
            this.getList()
          })
        } else {
          this.$refs.form.validate((valid) => {
            if (!valid) return
            this.loading = true
            //修改
            //const params = form
            modifyCount(params)
              .then((res) => {
                this.getList()
                this.$message.success('修改成功')
                this.cancel()
              })
              .catch((err) => {
                this.$message.error(err.message || '修改失败')
              })
              .finally(() => {
                this.loading = false
              })
          })
        }
      })
    },

    /**删除按钮 */
    handleDel(row) {
      this.delRow = row
      this.deleteVisible = true
    },
    /** 确定删除 */
    deleteSKU() {
      let row = this.delRow
      this.loading = true
      const ids = row.id
      delCount(ids)
        .then((res) => {
          this.getList()
          this.$message.success('SKU删除成功')
        })
        .catch((err) => {
          this.$message.error(err.message || 'SKU删除失败')
        })
        .finally(() => {
          this.loading = false
          this.deleteVisible = false
        })
    },

    /**关闭弹窗 新增或修改*/
    cancel() {
      //this.$refs.addSku.clearSelection();
      this.editRow = null
      this.dialogOpen = false
      this.isEdit = false
      this.form.projectId = ''
      this.$refs.form.clearValidate();
    },

    /** 表格全选事件 */
    handleSelectionChange(selection) {
      this.exportList = selection
    },
    /**分页 */
    pagination() {
      this.getList()
    },
    // //导出excel
    // ExportExcel() {
    //   const params = this.list
    //   exportSKUExcel(params).then((res) => {
    //     if (res.data == 200) {
    //       this.$message.success("导出成功！")
    //     }
    //   }).catch((err) => {
    //     this.$message.success("结果查询失败，原因：", err.message)
    //   })
    // },
  },
}
</script>
<style lang="scss">
</style>
    